<template>
  <div>
    <div class="todo-footer" v-show="this.allTodos">
      <div class="todo-finish">
        <input
          class="todo-input"
          type="checkbox"
          :checked="check"
          @change="changeChecked"
        />
        <span>已完成{{ finishedTodo }}</span>
        &nbsp;/&nbsp;
        <span>全部{{ allTodos }}</span>
      </div>
      <button class="todo-button" @click="deleteFinishedTodo">
        清除已完成任务
      </button>
    </div>
    <div v-show="!this.allTodos">
        <h3 class="todo-text">暂时没有待办事件~~</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props: ["todoList", "deleteFinishedTodoList", "selectTodos"],
  computed: {
    finishedTodo() {
      return this.todoList.reduce(
        (pre, current) => pre + (current.done ? 1 : 0),
        0
      );
    },
    allTodos() {
      return this.todoList.length;
    },
    check() {
      return this.todoList.length && this.finishedTodo == this.allTodos;
    },
  },
  methods: {
    changeChecked(e) {
      this.selectTodos(e.target.checked);
    },
    deleteFinishedTodo() {
      this.deleteFinishedTodoList();
    },
  },
};
</script>

<style scoped>
.todo-footer {
  width: 400px;
  height: 80px;
  margin: 0 auto;
  padding-left: 6px;
  text-align: start;
  position: relative;
  display: flex;
  align-items: center;
}
.todo-input {
  margin-right: 25px;
}
.todo-button {
  line-height: 30px;
  background-color: #c72f32;
  border: 2px solid #c72f32;
  box-shadow: 2px 2px 3px #c72f32;
  border-radius: 5px;
  color: #fc5430;
  font-size: 14px;
  font-weight: 500;
  width: 150px;
  position: absolute;
  right: 0;
  margin-right: 6px;
}
.todo-text {
    color: #a4c5fe;
    text-shadow: 2px 2px 3px #fc5430;
    font-size: 25px;
    font-weight: 700;
    line-height: 80px;
}
</style>